<template>
  <a-modal title="订单商品详情" style="top: 100px;" :visible="isShow" width="1300px" @ok="handleOk" @cancel="handleCancel"
    :footer="false">
    <div id="printTest">
    <div class="address" v-if="info.address">
      <a href="javascript:;">
        <a-icon type="user" style="padding-right:4px;"></a-icon>
      </a>
      <span>{{ info.address.consignee }}&nbsp;&nbsp;</span>
      <span>{{ info.address.phone }}</span>&nbsp;&nbsp;
      <span>{{ info.address.province }}&nbsp;{{ info.address.city }}&nbsp;{{ info.address.district }}&nbsp;{{ info.address.address }}</span>&nbsp;
      <a-button style="margin-right: 10px; float: right;" class="hidden"  @click="handleXqlogBatch(row)">
        <span>一键分配</span>
      </a-button>
      <a-button style="margin-right: 10px; float: right;" class="hidden"  @click="handleXqlogBatch2(row)">
        <span>一键申请</span>
      </a-button>
    </div>
    <span>{{ info.created_at_text }}</span>
   <a-table class="table" :pagination="false" :dataSource="info.goods_list">
      
      <a-table-column title="商品" >
        <template slot-scope="row">
          <div>{{row.title}}</div>
        </template>
      </a-table-column>

      <a-table-column title="数量" >
        <template slot-scope="row">
          <div>{{row.xq_num}}</div>
        </template>
      </a-table-column>
      
      <a-table-column title="活动标题" >
        <template slot-scope="row">
          <div>{{row.node_title}}</div>
        </template>
      </a-table-column>

      <a-table-column title="现有库存"  class="hidden">
        <template slot-scope="row">
          <span>{{row.stock}}</span>
        </template>
      </a-table-column>


      <a-table-column title="可分配库存"  class="hidden">
        <template slot-scope="row">
          <span v-if="row.kfp >= row.xq_num" class="storage-num1">{{row.kfp}}</span>
          <span v-else class="storage-num0">{{row.kfp}}</span>
        </template>
      </a-table-column>

      <a-table-column title="采购中"  class="hidden">
        <template slot-scope="row">
          <div>{{row.on_buy}}</div>
        </template>
      </a-table-column>

      <a-table-column title="状态"  class="hidden">
        <template slot-scope="row">
          <div>
          <span v-if="row.status == -1 && row.kfp >= row.xq_num">待分配</span>
          <span v-else-if="row.status == -1">待申请</span>
          <span v-else-if="row.status == 1" >已分配</span>
          <span v-else-if="row.status === 0">已申请</span>
          </div>
        </template>
      </a-table-column>
      <a-table-column title="替换"  class="hidden">
        <template slot-scope="row">
          <a href="javascript:;" @click="handleReplace(row,0)" v-if="row.kfp==0">替换</a>
        </template>
      </a-table-column>
      <a-table-column title="操作"  class="hidden">
        <template slot-scope="row">
          <a href="javascript:;" @click="handleXqlog(row,1)" v-if="row.status == -1 && row.kfp >= row.xq_num">分配</a>
          <a href="javascript:;" @click="handleXqlog(row,0)" v-else-if="row.status == -1">去申请</a>
          <a href="javascript:;" @click="handleXqlog2(row,0)" v-if="row.status == 1">取消</a>
        </template>
      </a-table-column>

      
    </a-table>

    </div>

    <div class="btn-c">

      <a-button style="margin-right: 10px; float: right;"  type="primary" v-print="'#printTest'">
        <span>打印</span>
      </a-button>

    </div>
    <Buyslog :info="participant" v-if="isEditBuysLog" @refresh="initData" @close="isEditBuysLog = false"></Buyslog>
    <Product  v-if="productShow" @close="productShow=false" :replaceRow="replaceRow" @change="replaceProduct"></Product>
  </a-modal>
</template>
<script>
  import Buyslog from "@/views/storage/components/Buyslog.vue"
  import Product from "@/views/orders/components/Product.vue"
  export default {
    components: {
      Buyslog,
      Product
    },
    props: {
      order: {
        type: Object
      },
      isShow: {
        type: Boolean
      }
    },
    computed: {
      uuid() {
        return this.order && this.order.uuid
      }
    },
    data() {
      return {
        info: {},
        isEditBuysLog: false,
        participant: {},
        ids:[],
        productShow:false,
        replaceRow:{},
      }
    },
    watch: {
      uuid() {
        this.initData()
      }
    },
    mounted() {
      this.initData()
    },
    methods: {
      replaceProduct(val){
        console.log(val)
        this.$http.post('/orderSkus/'+ this.uuid,{
          sku_id:val.skuId,
          id:val.id,
          replace_id:val.replaceId,
          order_id:val.orderId,
          number:val.number,
        }).then(res => {
          if(res.code===0){
            this.$message.success('执行成功')
          this.initData()
          this.$emit('refresh')
          }else{
            this.$message.error(res.message)
          }
          
        })
      },
      // 替换
      handleReplace(row){
        this.replaceRow=row;
        this.replaceRow.orderId=this.order.id;
        this.productShow=true;
        
      },
      handleXqlogBatch(row,status){
        this.$http('/storage_xq_log_batch/' + this.uuid).then(res => {
          this.$message.success('执行成功')
          this.initData()
          this.$emit('refresh')
        })
      },
      handleXqlogBatch2(row,status){
        this.$http('/storage_xq_log_batch2/' + this.uuid).then(res => {
          this.$message.success('执行成功')
          this.initData()
          this.$emit('refresh')
        })
      },
      handleXqlog(row,status){
        this.$http.post(`/storage_xq_log`, {
          xq_id:row.xq_id,
          num:row.xq_num,
          order_id:this.order.id,
          status:status,
        }).then(res => {
          this.$message.success('执行成功')
          this.initData()
          this.$emit('refresh')
        })
      },
      handleXqlog2(row,status){
        this.$http.delete(`/storage_xq_log/${row.xq_uuid}`).then(res => {
          this.$message.success('取消成功')
          this.initData()
          this.$emit('refresh')
        })
      },
      handleEditBuys(row){
        this.participant = row
        this.isEditBuysLog = true
      },
      initData() {
        this.$http('/storage_xqinfo/' + this.uuid).then(res => {
          this.info = res.data
        })
      },
      handleOk() {},
      handleCancel() {
        this.$emit('hide')
      },
    },

  }
</script>
<style lang="scss" scoped>
  .tips {
    color: gray;
    font-size: 80%;
  }

  .item {
    display: flex;

    .key {
      width: 100px;
      flex: 0 0 100px;
      text-align: right;
      margin-right: 20px;
      font-weight: 500;
      margin-bottom: 10px;
    }
  }

  .aftersale-image {
    height: 60px;
    margin-right: 10px;
    margin-bottom: 20px;
  }

  .btn-c {
    overflow: hidden;
    margin: 20px 0px 10px 0px;
  }

  .storage-num0 {
    font-size: 80%;
    font-weight: 500;
    background:  red;
    color: white;
    padding: 2px 5px;
    // font-size: 24rpx;
    border-radius: 6px;
    margin-left: 10px;
  }

  .storage-num1 {
    font-size: 80%;
    font-weight: 500;
    background:  green;
    color: white;
    padding: 2px 5px;
    // font-size: 24rpx;
    border-radius: 6px;
    margin-left: 10px;
  }
</style>
<style media="print">
@page {
  size: auto;
  margin: 3mm;
}

@media print {
  .hidden{
      display: none;
  }
}

html {
  background-color: #ffffff;
  height: auto;
  margin: 0px;
}
</style>